<template>
  <div>
    <el-table :data="emps" style="width: 100%">
      <el-table-column label="部门编号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.empno }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.ename }}</p>
            <p>工作: {{ scope.row.job }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.ename }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="工资" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.sal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.deptno }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleadd(scope.$index, scope.row)">添加</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- 确认删除 -->
          <el-popconfirm title="你确认删除吗！！！？" @confirm="deleteEmp(scope.row)">
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <!-- 新增 -->
    </el-table>
    <el-dialog title="添加信息" :visible.sync="dialogFormVisible1">
      <el-form :model="emp1">
        <el-form-item label="ename" :label-width="formLabelWidth">
          <el-input v-model="emp1.ename" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="empno" :label-width="formLabelWidth">
          <el-input v-model="emp1.empno" autocomplete="off"></el-input>
        </el-form-item>-->
        <el-form-item label="job" :label-width="formLabelWidth">
          <el-input v-model="emp1.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="sal" :label-width="formLabelWidth">
          <el-input v-model="emp1.sal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="deptno" :label-width="formLabelWidth">
          <el-input v-model="emp1.deptno" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addEmp">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除模态框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="emp">
        <el-form-item label="ename" :label-width="formLabelWidth">
          <el-input v-model="emp.ename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="empno" :label-width="formLabelWidth">
          <el-input v-model="emp.empno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="job" :label-width="formLabelWidth">
          <el-input v-model="emp.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="sal" :label-width="formLabelWidth">
          <el-input v-model="emp.sal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="deptno" :label-width="formLabelWidth">
          <el-input v-model="emp.deptno" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateEmp">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//定义数组移除规则
Array.prototype.remove = function(val) {
  var index = this.indexOf(val);

  if (index > -1) {
    this.splice(index, 1);
  }
};
export default {
  created: function() {
    //初始化
    this.$http
      .get("emp")
      .then(response => {
        console.log(response);
        this.emps = response.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  data() {
    return {
      emps: [
        {
          empno: "2016-05-02",
          ename: "王小虎",
          sal: "上海市普陀区金沙江路 1518 弄",
          job: "",
          deptno: ""
        },
        {
          empno: "2016-05-02",
          ename: "王小虎",
          sal: "上海市普陀区金沙江路 1518 弄",
          job: "",
          deptno: ""
        },
        {
          empno: "2016-05-02",
          ename: "王小虎",
          sal: "上海市普陀区金沙江路 1518 弄",
          job: "",
          deptno: ""
        },
        {
          empno: "2016-05-02",
          ename: "王小虎",
          sal: "上海市普陀区金沙江路 1518 弄",
          job: "",
          deptno: ""
        }
      ],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      emp: {
        empno: "",
        ename: "",
        sal: "",
        job: "",
        deptno: ""
      },
      emp1: {
        empno: "",
        ename: "",
        sal: "",
        job: "",
        deptno: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    //新增
    addEmp: function() {
      this.$http
        .post("deptadd", {
          empno: this.emp1.empno,
          ename: this.emp1.ename,
          sal: this.emp1.sal,
          job: this.emp1.job,
          deptno: this.emp1.deptno
        })
        .then(response => {
          if (response.data.ename == this.emp1.ename) {
            this.emps.push(response.data);
            this.$message("添加成功！！！");
          }
        })
        .catch(error => {
          console.log(error);
        });

      this.dialogFormVisible1 = false;
    },
    //删除
    deleteEmp: function(row) {
      // alert("delete" + row.empno);
      this.$http
        .delete("dept/" + row.empno)
        .then(response => {
          //更新展示集合数据
          if (response.data) {
            for (var i = 0; i < this.emps.length; i++) {
              if (this.emps[i].empno == row.empno) {
                // alert(i)
                this.emps.remove(this.emps[i]);
                this.$message("删除成功！！！");
              }
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //修改
    updateEmp: function() {
      this.$http
        .put("empupdate", {
          empno: this.emp.empno,
          ename: this.emp.ename,
          sal: this.emp.sal,
          job: this.emp.job,
          deptno: this.emp.deptno
          // emp: this.emp
        })
        .then(response => {
          //提示修改成功
          this.$message("修改成功！！！");
          //更新集合数据
          for (var i = 0; i < this.emps.length; i++) {
            if (this.emps[i].empno == response.data.empno) {
              console.log(response);
              alert(response.data.empno);
              this.emps[i] = response.data;
              break;
            }
          }

          //第二种方式
          // for (var i = 0; i < this.emps.length; i++) {
          //   if (this.emps[i].empno == this.emp.empno) {
          //     alert(this.emp.empno)
          //     this.emps[i] = emp;
          //     break;
          //   }
          // }
        })
        .catch(error => {
          console.log("error");
        });

      this.dialogFormVisible = false; //关闭模态框
    },
    handleEdit(index, row) {
      alert(row.empno);
      this.emp = row;
      this.dialogFormVisible = true; //设置模态框显示属性
    },
    //新增
    handleadd: function() {
      this.emp1={};
      this.dialogFormVisible1 = true; //设置模态框显示属性
    }
  }
};
</script>
<style>
</style>

